<template>
  <div class="auth-item">
    <el-checkbox-group v-model="ids">
      <div>
        <el-checkbox
          @change="(checked: boolean) => handleChange(checked, item)"
          :value="item.id"
          class="menu-name"
          >
          <el-icon v-if="item.icon_type == 1">
            <component :is="item.icon_name ? item.icon_name : 'Menu'"></component>
          </el-icon>
          <i v-if="item.icon_type == 2" class="el-icon iconfont" :class="item.icon_name" />
          {{ item.title }}
        </el-checkbox
        >
      </div>
      <div v-if="item.children && item.children.length > 0">
        <el-checkbox
          v-for="(action, idx) in item.children"
          :key="idx"
          @change="(checked: boolean) => handleChange(checked, item, action)"
          :value="action.id"
          class="action-name"
          >{{ action.title }}</el-checkbox
        >
      </div>
    </el-checkbox-group>
  </div>
</template>

<script setup lang="ts" name="AuthItem">
import { PropType, ref, watch } from "vue";

let emits = defineEmits(["change"]);
const props = defineProps({
  item: {
    type: Object as PropType<any>,
    required: true
  },
  authIds: {
    type: Array,
    required: true
  }
});

const ids = ref<number[]>(props.authIds as number[]);
watch(props.authIds as number[], (newAuthIds: number[]) => {
  ids.value = newAuthIds;
});

const handleChange = (checked: boolean, menu: any, action?: any) => {
  emits("change", checked, menu, action);
};
</script>

<style lang="scss" scoped>
.menu-name {
  :deep(.el-checkbox__label) {
    display: flex;
    align-items: center;
    .el-icon {
      margin-right: 5px;
    }
  }
}
.action-name {
  :deep(.el-checkbox__label) {
    font-size: 12px;
  }
}
</style>
